<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
        <title>Color picker demo</title>
		<link rel="stylesheet" media="screen" type="text/css" href="<?=base_url()?>js/colorpicker/css/colorpicker.css" />
		<script type="text/javascript" src="<?=base_url()?>js/colorpicker/js/jquery.js"></script>
		<script type="text/javascript" src="<?=base_url()?>js/colorpicker/js/colorpicker.js"></script>
	
		<script language="javascript">
				jQuery(document).ready(function() {
						$('#colorpickerField1').ColorPicker({
						onSubmit: function(hsb, hex, rgb, el) {
							$(el).val(hex);
							$(el).ColorPickerHide();
						},
						onBeforeShow: function () {
							$(this).ColorPickerSetColor(this.value);
						}
					})
					.bind('keyup', function(){
						$(this).ColorPickerSetColor(this.value);
					});
				});
		</script>	
	
	</head>
	<body>
		
		<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
		
	</body>
</html>
